<template>
  <div class="list-wrapper">
    <div class="top-me-wrapper">
        <h3 class="title">{{title}}</h3>
        <span class="flag" v-if="showFlag"> <i>默认</i> </span>
        <span class="number">共{{number}}个 <van-icon name="arrow" size="10px" /></span>
    </div>
    <div class="imgs-wrapper">
        <div class="img-block">
            <div class="img" v-for="item in imgList" :key="item.id">
                <img :src="item.imgUrl" style="width: 100%; height: 100%;" alt="">
            </div>
            <div class="img more" v-if="showMore" @click="toMore">
                <p>查看更多</p>
                <span>more</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showFlag: {
      type: Boolean,
      default: true
    },
    showMore: {
      type: Boolean,
      default: true
    },
    imgList: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: ''
    },
    number: {
      type: Number,
      default: 0
    }
  },
  data () {
    return {
    }
  },
  methods: {
    toMore () {
      this.$router.push('/pages/more/main')
    }
  },
  mounted () {
    console.log(this.imgList)
  }
}
</script>

<style lang="scss" scoped>
.list-wrapper {
    margin-top: 10px;
    width: 100%;
    .top-me-wrapper {
        position: relative;
        margin-left: 10px;
        .title {
            display: inline-block;
            font-weight: 700;
            padding: 5px;
        }
        .flag {
            font-size: 16px;
            display: inline-block;
            padding: 5px;
            background-color: #fff4bd;
            border-radius: 4px;
            font-size: 14px;
        }
        .number {
            font-size: 16px;
            color: #ccc;
            display: inline-block;
            position: absolute;
            right: 5px;
            top: 4px;
        }
    }
    .imgs-wrapper {
        .img-block {
            margin-top: 10px;
            display: inline-block;
            width: 100%;
            height: 210px;
            .img {
                margin: 5px;
                display: inline-block;
                width: 85px;
                height: 85px;
                border-radius: 10px;
                overflow: hidden;
            }
            .more {
                width: 85px;
                height: 85px;
                border-radius: 10px;
                background-color: #fafafa;
                position: relative;
                p {
                    text-align: center;
                    color: #bfbfbf;
                    line-height: 75px;
                    font-size: 14px;
                }
                span {
                    position: absolute;
                    top: 50px;
                    left: 25px;
                    font-size: 12px;
                    color: #bfbfbf;
                }
            }
        }
    }
}
</style>
